<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="商品图片" prop="skuPicture">
            <template v-slot:default="{ row }">
                <img :src="row.skuPicture" style="width: 130px; " />
            </template>
        </el-table-column>
        <el-table-column label="商品名" prop="skuName" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="收货人" prop="consignee" />
        <el-table-column label="手机号" prop="phoneNumber" />
        <el-table-column label="地址" prop="detailAddress" />
        <el-table-column label="数量" prop="num" />
        <el-table-column>
            <template #default="scope">
                <el-button size="small" @click="buyNow(scope.$index, scope.row)">去下单</el-button>

            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>

            <template #default="scope">

                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                
                
                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                        title="Are you sure to delete this?" @confirm="handleDelete(scope.$index, scope.row)" @cancel="cancelEvent">
                        <template #reference>
                            <el-button size="small" type="danger" >删除</el-button>
                        </template>
                    </el-popconfirm>
                
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="修改购物车">
        <el-form :model="form">
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-select v-model="form.addressId" placeholder="请选择收货地址">
                    <el-option v-for="item in address" :key="item.id" :label="item.address" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input-number v-model="form.num" :min="1" :max="10" :step="1" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editShoppingCart()">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import api from '@/api'
import store from '@/store'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()

const cancelEvent = () => {
    console.log('cancel!')
}

const search = ref('')
const filterTableData = computed(() =>
    shoppingCartList.value.filter(
        (data) =>
            !search.value ||
            data.skuName.toLowerCase().includes(search.value.toLowerCase())
    )
)

const handleEdit = (index: number, row: any) => {
    form.addressId = row.addressId
    form.num = row.num
    form.id = row.id
    dialogFormVisible.value = true
}
const handleDelete = (index: number, row: any) => {
    api.orders.deleteShoppingCartById({ id: row.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            // 存储 token
            getShoppingCartByUserId()
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}


const shoppingCartList = ref([
    {
        id: '',
        skuName: '',
    }
])

onMounted(() => {
    getShoppingCartByUserId()
    getAddressByUserId()
})

function getShoppingCartByUserId() {
    api.orders.getShoppingCartByUserId({ userId: store.getters.getUserInfo.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            shoppingCartList.value = response.data.data

        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    addressId: '',
    num: '',
    id: ''
})


const address = ref([
    {
        id: '',
        address: ''
    }
])

function getAddressByUserId() {
    api.address.getAddressByUserId({ userId: store.getters.getUserInfo.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            address.value = response.data.data

        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

function editShoppingCart() {
    dialogFormVisible.value = false
    api.orders.editShoppingCart(form)
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            // 存储 token
            getShoppingCartByUserId()
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

function buyNow(index: number, row: any) {
    api.orders.addShoppingCartOrder({ id: row.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            router.push({
                name: 'orderspay',
                params: {
                    id: response.data.data
                }
            });
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })

        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });

}
</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>